昨天已經可以開啟了圖片連結,今天我們來進階一點做一個樣版引擎的頁面吧!
樣版引擎(template engine),顧名思義就是有一個固定樣版,可以動態的畫出我們的頁面,
另外也可以將頁面重複的部分做一個樣版,減少冗長重複的程式碼。
express 比較常看到的樣版引擎是 EJS,也有其他的樣版可以參考官網。
我們今天就以 EJS 來做示範:
首先,先在終端機下 npm install ejs
的指令下載 EJS
套件。
到 public
資料夾底下新建一個 views 的資料夾,並取一個 page.ejs
檔名的檔案。
寫入一個示範的 html
。
// page.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>圖書資訊</title>
</head>
<body>
<h3>Book Page</h3>
</body>
</html>
到 app.js
檔案取得樣版引擎所在的資料夾及樣版的屬性。
// app.js
app.set('views',__dirname + '/public/views') // 樣版引擎所在的資料夾
app.set('view engine', 'ejs') // 樣版的屬性
接著我們到 routes/modules/book.js
將 res.send('Get a book')
改成 res.render('page')
(從回應文字改成回應一個頁面)。
// routes/modules/book.js
router.get('/', (req, res) => {
// res.send('Get a book')
res.render('page')
})
最後我們只要在終端機下 node app.js
指令開啟伺服器,
並到瀏覽器開啟 http://localhost:3000/book
。
就可以看到我們做的樣板頁面了哦!
以上就是能夠基本使用樣板引擎的作法,
想要讓樣版引擎動態的出現文字的話,我們明天繼續看下去吧!
參考資料: